<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css"
	href="/ComputerStore/public/css/admin_content.css">
<script type="text/javascript"
	src="/ComputerStore/public/js/jquery-1.6.2.min.js"></script>
<s:head/>
<title>Quản lý khách hàng</title>
</head>
<body>
	<h1>Quản lý khách hàng</h1>
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Danh sách khách
			hàng&nbsp;&nbsp;&nbsp;</a> <a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Thêm
			khách hàng&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Table danh sách khách hàng -->
	<div id="list">
		<div class="title">Danh sách khách hàng</div>
		<div class="content">
			<table border="1">
				<tr id="tableTitle">
					<th>&nbsp; STT</th>
					<th>&nbsp; Tên khách hàng</th>
					<th>&nbsp; Mật khẩu</th>
					<th>&nbsp; Giới tính</th>
					<th>&nbsp; Địa chỉ</th>
					<th>&nbsp; Email</th>
					<th>&nbsp; Số điện thoại</th>
					<th>&nbsp; Ngày tạo</th>
					<th>&nbsp; Mã</th>
					<th>&nbsp; Thao tác</th>
				</tr>
				<s:iterator value="customerList" var="customer" status="itStatus">
					<tr id="<s:property value="id"/>">
						<td align="center"><s:property value="#itStatus.Count" /></td>
						<td><s:property value="name" /></td>
						<td><s:property value="password" /></td>
						<td align="center"><s:property value="gender" /></td>
						<td><s:property value="address" /></td>
						<td><s:property value="email" /></td>
						<td><s:property value="phone" /></td>
						<td align="center"><s:property value="dateCreated" /></td>
						<td align="center"><s:property value="id" /></td>
						<td align="center"><a class="operation"
							href="deleteCustomer?id=<s:property value="id"/>">&nbsp;Xóa&nbsp;</a>&nbsp;-&nbsp;<a
							class="operation" name="edit" id=<s:property value="id"/>
							href="#">&nbsp;Sửa&nbsp;</a></td>
					</tr>
				</s:iterator>
			</table>
		</div>
	</div>

	<!-- Form thêm khách hàng mới -->
	<div id="formAdd">
		<div class="title">Thêm khách hàng</div>
		<div class="content" align="center">
			<s:form id="form1" action="addCustomer" method="post" validate="true">
				<s:textfield cssClass="textfield" name="customer.name" required="true"
					label="Tên khách hàng" size="50" />
				<s:select cssClass="textfield" name="gender" label="Giới tính"
					list="#{'Nam':'Nam', 'Nữ':'Nữ'}"></s:select>
				<s:textfield cssClass="textfield" name="customer.password" required="true"
					label="Mật khẩu" size="50" />
				<s:textfield cssClass="textfield" name="customer.address"
					label="Địa chỉ" size="50"></s:textfield>
				<s:textfield cssClass="textfield" name="customer.email" required="true"
					label="Email" size="50"></s:textfield>
				<s:textfield cssClass="textfield" name="customer.phone" required="true"
					label="Số điện thoại" size="50"></s:textfield>
				<s:submit id="button" value="Thêm mới"></s:submit>
			</s:form>
		</div>
	</div>

	<!-- Form thay đổi thông tin khách hàng -->
	<div id="formEdit">
		<div class="title">Sửa thông tin khách hàng</div>
		<div class="content" align="center">
			<s:form id="form2" action="editCustomer" method="post" validate="true">
				<s:hidden id="idEditTextfield" name="customer.id" />
				<s:textfield id="nameEditTextfield" cssClass="textfield" required="true"
					name="customer.name" label="Tên khách hàng" size="50" />
				<s:select id="genderEditSelect" cssClass="textfield" name="gender"
					label="Giới tính" list="#{'Nam':'Nam', 'Nữ':'Nữ'}"></s:select>
				<s:textfield id="passwordEditTextfield" cssClass="textfield" required="true"
					name="customer.password" label="Mật khẩu" size="50" />
				<s:textfield id="addressEditTextfield" cssClass="textfield"
					name="customer.address" label="Địa chỉ" size="50"></s:textfield>
				<s:textfield id="emailEditTextfield" cssClass="textfield" required="true"
					name="customer.email" label="Email" size="50"></s:textfield>
				<s:textfield id="phoneEditTextfield" cssClass="textfield" required="true"
					name="customer.phone" label="Số điện thoại" size="50"></s:textfield>
				<s:submit id="button" value="Cập nhật"></s:submit>
			</s:form>
		</div>
	</div>

	<!-- Javascript -->
	<script>
		$(document).ready(function() {
			$("#formEdit").css("display", "none");
			$("#formAdd").css("display", "none");
			$("#showList").css("border-style", "inset");

			$("#showForm").click(function() {
				$(this).css("border-style", "inset");
				$("#showList").css("border-style", "outset");
				$("#list").hide("fast");
				$("#formEdit").hide("fast");
				$("#formAdd").show("fast");
			});

			$("#showList").click(function() {
				$(this).css("border-style", "inset");
				$("#showForm").css("border-style", "outset");
				$("#formAdd").hide("fast");
				$("#formEdit").hide("fast");
				$("#list").show("fast");
			});

			var valueArray = new Array();

			$("a").click(function() {
				if ($(this).attr("name") == "edit") {
					var id = $(this).attr("id");
					$('#' + id + ' td').each(function(index) {
						valueArray[index] = $(this).text();
					});

					$("#idEditTextfield").val(id);
					$("#nameEditTextfield").val(valueArray[1]);
					$("#genderEditSelect").val(valueArray[3]);
					$("#addressEditTextfield").val(valueArray[4]);
					$("#emailEditTextfield").val(valueArray[5]);
					$("#phoneEditTextfield").val(valueArray[6]);
					$("#passwordEditTextfield").val("");
					$("#showList").css("border-style", "outset");
					$("#list").hide("fast");
					$("#formEdit").show("fast");
				}
			});
		});
	</script>
</body>
</html>